<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">
		<!-- <view class="surplus-content">
			<view>账户余额(元)</view>
			<view>{{y}}</view>
			<view>总收益(元)</view>
			<view>{{sy}}</view>
			<view>奖池收益(元)</view>
			<view>{{jcsy}}</view>
			<view>我的积分</view>
			<view>{{j}}</view>
			<view @click="gotopage" data-url="/pages/personal/withdrawal">提现</view>
			<view @click="gotopage" data-url="/pages/personal/transfer">转账</view>
		</view> -->

		<view class="bg_box">
			<view class="bg01"></view>
			<view class="assets_box">
				<view class="text_box">
					<view class="title">我的创业股</view>
					<view class="num">{{ y }}%</view>
					<view class="text"></view>
				</view>
			<view class="menu" @click="gotopage" :data-url="'/pages/goods/goods?id=' + good_id">领证</view>
			</view>
		</view>

		<view class="total_title">
			<view class="line"></view>
			<view class="text">收益明细</view>
		</view>

		<block v-for="(item, index) in list" :key="'list' + index">
			<view class="list_box">
				<view class="text_box">
					<view class="text">{{ item.name }}</view>
					<view class="time">{{ item.time }}</view>
				</view>
				<view class="money">
				<view class="status" v-if="item.st == 1">待领证</view>
				<view class="status" v-if="item.st == 2">已领证</view>
				<view class="m" >{{ item.money }}%</view>
				</view>
			</view>
		</block>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				
			],
			y: 0,
			sy: 0,
			jcsy: 0,
			sx: 0,
			j: 0,
			good_id:0
		};
	},
	onLoad() {
		let me = this;

		me.Net._get('gp', {}, res => {
			if (res.code == 1) {
				me.list = res.data.gplist;
	me.good_id=res.data.gp_id
				me.y = res.data.gp;
				console.log(res.data);
			}
		});
	},
	methods: {
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
}

.surplus-content {
	width: 690rpx;
	height: 490rpx;
	margin: 2vw auto 0vw;
	background-image: linear-gradient(#4d726f, #b4eef7);
	background-position: bottom;
	border-radius: 2vw;
	background-repeat: no-repeat;
	position: relative;

	view {
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 40rpx;
		&:nth-child(1) {
			font-size: 28rpx;
			top: 50rpx;
		}
		&:nth-child(2) {
			font-size: 48rpx;
			top: 100rpx;
		}
		&:nth-child(3) {
			font-size: 28rpx;
			top: 50rpx;
			left: 430rpx;
		}
		&:nth-child(4) {
			font-size: 48rpx;
			top: 100rpx;
			left: 430rpx;
		}
		&:nth-child(5) {
			font-size: 28rpx;
			top: 230rpx;
		}
		&:nth-child(6) {
			font-size: 48rpx;
			top: 280rpx;
		}
		&:nth-child(7) {
			font-size: 28rpx;
			top: 230rpx;
			left: 430rpx;
		}
		&:nth-child(8) {
			font-size: 48rpx;
			top: 280rpx;
			left: 430rpx;
		}
		&:nth-child(9) {
			font-size: 28rpx;
			width: 220rpx;
			height: 76rpx;
			background-color: #fff;
			text-align: center;
			line-height: 76rpx;
			border-radius: 40rpx;
			top: 390rpx;
			left: 40rpx;
			color: #036f7c;
		}
		&:nth-child(10) {
			font-size: 28rpx;
			width: 220rpx;
			height: 76rpx;
			background-color: #fff;
			text-align: center;
			line-height: 76rpx;
			border-radius: 40rpx;
			top: 390rpx;
			left: 430rpx;
			color: #036f7c;
		}
	}
}

.bill-content {
	width: 690rpx;
	margin: 30rpx auto;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		padding: 24rpx 0;
	}

	.body {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 0 4rpx 2rpx #f6f6f6;

		.bill-item {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f6f7f9;
			&:last-child {
				border-bottom: none;
			}

			.left {
				view {
					font-weight: 500;
					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.right {
				font-size: 30rpx;
				font-weight: 500;
			}

			.red {
				color: #333;
			}
			.black {
				color: #ff4447;
			}
		}
	}
}

.list_box {
	width: 90%;
	margin: 0 auto;
	padding: 3vw 0;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #e8e8e8;
}

.list_box .text_box {
	flex: 1;
}

.list_box .text_box .text {
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
}

.list_box .time {
	font-size: 3.2vw;
	color: #999;
	margin-top: 2vw;
}

.list_box .money {
	flex: 1;
}

.list_box .money .status {
	font-size: 3.5vw;
	color: #4d726f;
	text-align: right;
}

.list_box .money .m {
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	text-align: right;
	margin-top: 2vw;
}

.moneycolor {
	color: #e1001e !important;
}

.total_title {
	width: 90%;
	margin: 15vw auto 0;
	display: flex;
	align-items: center;
}

.total_title .line {
	width: 2vw;
	height: 6vw;
	border-radius: 2vw;
	background-color: #4d726f;
	margin-right: 2vw;
}

.total_title .text {
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}

.bg_box {
	width: 100%;
	position: relative;
}

.bg_box .bg01 {
	width: 100%;
	height: 22vw;
	background-color: #4d726f;
}

.bg_box .assets_box {
	width: 90%;
	position: absolute;
	top: 6vw;
	left: calc(50% - 45%);
	background-color: #ffffff;
	border-radius: 3vw;
	padding: 4vw 5vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 0 10rpx #5b5b5b;
}

.bg_box .assets_box .menu {
	width: 24vw;
	height: 10vw;
	line-height: 10vw;
	background-color: #ffa322;
	border-radius: 12vw;
	font-size: 3.5vw;
	color: #fff;
	text-align: center;
	margin-left: 2vw;
}

.bg_box .assets_box .text_box {
	// flex: 1;
}

.bg_box .assets_box .text_box .title {
	font-size: 3.5vw;
	color: #333; 
	text-align: left;
}

.bg_box .assets_box .text_box .num {
	font-size: 6vw;
	color: #333;
	font-weight: bold;
	margin-top: 3vw;
	text-align: center;
}

.bg_box .assets_box .text_box .text {
	font-size: 3.5vw;
	color: #333;
	margin-top: 3vw;
	text-align: center;
}
</style>
